<script lang="ts" setup>
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import { Pane, Splitpanes } from 'splitpanes'
import { CaretRight } from '@element-plus/icons-vue'
import HomeAside from './components/aside.vue'

onMounted(() => {})

const dirList: any = ref([])
const contentHtml = ref('')

function getDirList() {
  if (!contentHtml.value) {
    dirList.value = []
    return
  }
  const parser = new DOMParser()
  const doc = parser.parseFromString(contentHtml.value, 'text/html')
  const aArr: any = doc.querySelectorAll('a')
  const tocs: any = []
  for (let i = 0; i < aArr.length; i++) {
    if (aArr[i].id) {
      const href = aArr[i].id
      const name = aArr[i].parentNode.textContent
      tocs.push({
        href,
        name,
      })
    }
  }
  dirList.value = tocs
}

const activeData: any = ref({})
const breadList: any = ref([])
function handleClick(row: any) {
  activeData.value = row
  // 获取目录
  contentHtml.value = row.html || ''
  getDirList()
}

// function handleNav(item: any) {}

function setBreadList(list: any) {
  breadList.value = list
}

const router = useRouter()
function handleTest() {
  router.push(`/workspace`)
}

const dirActive: any = ref({})
function handleDir(row: any) {
  dirActive.value = row
  document.getElementById(row.href)?.scrollIntoView()
}
</script>

<template>
  <LayoutMain>
    <template #main>
      <section class="mix-splitter mx-5 my-3 min-w-300 flex flex-1 flex-col rounded-xl bg-white px-3 py-5">
        <Splitpanes class="default-theme">
          <Pane size="20" style="background-color: white;">
            <HomeAside @handle-click="handleClick" @set-bread-list="setBreadList" />
          </Pane>
          <Pane size="65" min-size="50" style="background-color: white;">
            <main
              class="mx-auto h-full max-w-320 min-w-150 flex flex-1 flex-col px-16 py-6"
            >
              <nav class="mb-3">
                <el-breadcrumb>
                  <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">
                    <a> {{ item.name }}</a>
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </nav>
              <header class="flex items-center justify-between border-b-1 border-[#f1f1f1] pb-3">
                <div class="flex items-center text-2xl color-[#171b1f] font-bold">
                  <span> {{ activeData.name }}</span>
                </div>
                <div>
                  <el-button type="primary" @click="handleTest">
                    <el-icon color="#ffffff">
                      <CaretRight />
                    </el-icon>
                    <span>测试</span>
                  </el-button>
                </div>
              </header>
              <div class="mb-7 mt-3 text-sm color-[#6e737b]">
                <span>最后更新：</span>
                <span>{{ activeData.utime ? activeData.utime.slice(0, 10) : '-' }}</span>
              </div>
              <div
                id="markDown"
                class="markdown-body flex-1 overflow-auto px-4"
                v-html="contentHtml"
              />
            </main>
          </pane>
          <Pane size="15" style="background-color: white;">
            <aside class="ml-6 mt-16 h-full min-w-15 flex flex-col text-sm">
              <div class="mb-2">
                本篇目录
              </div>
              <div v-if="dirList.length" class="flex-1 overflow-auto">
                <div
                  v-for="item in dirList"
                  :key="item.href"
                  class="dir-item h-10 flex cursor-pointer items-center"
                  :class="{ 'dir-active': item.href === dirActive.href }"
                  @click="handleDir(item)"
                >
                  <div class="dir-before mr-1.5 h-4.5 w-0.5" />
                  <div class="text-ellipsis">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div v-else class="color-[#6e737b]">
                暂无目录
              </div>
            </aside>
          </pane>
        </Splitpanes>
      </section>
    </template>
  </LayoutMain>
</template>

<style lang="scss" scoped>
@use '~/assets/markdown.scss';
@use '~/assets/splitpanes.scss';
</style>

<style lang="scss" scoped>
.dir-item {
  font-size: 14px;
  color: #6e737b;
}

.dir-active,
.dir-item:hover {
  color: #30353e;
}

.dir-active {
  .dir-before {
    background: #216ef2;
  }
}
</style>

<style lang="scss" scoped>
.mix-splitter :deep() .el-breadcrumb__inner a {
  color: #30353e;
  font-weight: normal;
  cursor: default;
}

.mix-splitter :deep() .el-breadcrumb__inner a:hover {
  color: #30353e;
  font-weight: normal;
  cursor: default;
}

.mix-splitter :deep() .el-breadcrumb__separator {
  color: #6e737b;
  font-weight: normal;
  margin: 0 8px;
}

.mix-splitter :deep() .el-breadcrumb {
  .el-breadcrumb__item:last-child a {
    color: #6e737b;
  }
}

.mix-splitter :deep() .el-breadcrumb {
  .el-breadcrumb__item:first-child a {
    color: #30353e;
  }
}
</style>
